<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="views/css/lib/chartist/chartist.min.css" rel="stylesheet">
<link href="views/css/lib/owl.carousel.min.css" rel="stylesheet" />
<link href="views/css/lib/owl.theme.default.min.css" rel="stylesheet" />
<link href="views/css/helper.css" rel="stylesheet">
<link href="views/css/style.css" rel="stylesheet">
<title>Insert title here</title>


</head>
<style>

#btn1{
display: inline-block;
    height: 33px;
    line-height: 35px;
    padding: 0 15px;
    background-color: #009688;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

#btn2{
display: inline-block;
    height: 33px;
    line-height: 35px;
    padding: 0 15px;
    background-color: red;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

#inlines{
background: #ffffff none repeat scroll 0 0;
    margin: 15px 0;
    padding: 20px;
    border: 0 solid #e7e7e7;
    border-radius: 5px;
    box-shadow: 0 5px 20px 0 rgba(0,0,0,0.15);
}
tbody tr td:last-child {
	text-align: left;
}

thead tr th:last-child {
	text-align: left;
}
</style>

<body>
	<!-- Bread crumb -->
	<div class="row page-titles">
		<div class="col-md-5 align-self-center">
			<h3 class="text-primary">查询下推</h3>
		</div>
		<div class="col-md-7 align-self-center">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
				<li class="breadcrumb-item active">查询下推</li>
			</ol>
		</div>
	</div>
	<!-- End Bread crumb -->


	<!-- Container fluid  -->
	<div class="container-fluid">
		<!-- Start Page Content -->
		<div class="row">
			<!-- <form class="layui-form" action="" lay-filter="form_config"> -->
				<div class="layui-form-item">
					<div class="layui-inline" id="inlines" style="width: 1700px;">
						<label class="layui-form-label" style="width: 75px;margin-left:10px;">查询负载</label>
						<input type="text" name="" placeholder=" select Sum(fbalance), avg(fbalance), Max(fbalance) from info (默认)"
						 style="width: 850px;" class="layui-input">
 						<button class="layui-btn" lay-submit="" id="btn1" onclick="nopush()">No-Pushdown</button>
 						<button class="layui-btn" lay-submit="" id="btn2" onclick="push()"  >Pushdown</button>
					</div>
			<!-- </form> -->

		</div>
		<div class="row">
			<div class="col-lg-6">
				<div class="card" style="width: 1700px;">
					<div class="card-title">
						<h4>No-PushDown</h4>
					</div>
					<div class="card-body">
						<div class="table-responsive"
							style="min-height: 250px; overflow-y: auto; max-height: 350px; width: 1500px;">
							<table class="table table-hover ">
								<thead>
									<tr>
										<th>物理执行计划</th>
									</tr>
								</thead>
								<tbody id="nopushdown">
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /# row -->
		<div class="row">
			<div class="col-lg-6">
				<div class="card" style="width: 1700px;">
					<div class="card-title">
						<h4>PushDown</h4>
					</div>
					<div class="card-body">
						<div class="table-responsive"
							style="min-height: 250px; overflow-y: auto; max-height: 350px; width: 1500px;">
							<table class="table table-hover ">
								<thead>
									<tr>
										<th>物理执行计划</th>
									</tr>
								</thead>
								<tbody id="pushdown">
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /# row -->

		<!-- End PAge Content -->
	</div>
	<!-- End Container fluid  -->
	<script type="text/javascript" src="/rest/views/js/jquery.js"></script>
	<script src="/rest/views/js/highcharts.js"></script>


	<script type="text/javascript">
	
		var chart = null; // 定义全局变量
		$(document)
				.ready(
						function() {


							chart = new Highcharts.Chart({
								chart : {
									renderTo : 'rate-chart',
									type : 'spline',
									events : {
										load : requestData
									// 图表加载完毕后执行的回调函数
									}
								},
								credits : {
									enabled : false,
									text : 'dbiir',
									href : 'http://iir.ruc.edu.cn'
								},
								title : {
									text : ''
								},
								xAxis : {
									type : 'datetime',
									tickPixelInterval : 150,
									maxZoom : 20 * 1000
								},
								yAxis : {
									minPadding : 0.2,
									maxPadding : 0.2,
									title : {
										text : '',
										margin : 80
									}
								},
								series : [ {
									name : 'Volume Per Second',
									data : []
								} ]
							});
						});

		
		function nopush(){
			document.getElementById("nopushdown").innerHTML += "<tr> <td> 物理计划生成中...</td></tr><tr> <td>"
			
			setTimeout(nopushs, 1500);
		}
		
		function nopushs(){
			$.ajax({
				url : '/rest/highEchart/getNoPushdown',
				cache : false,
				success : function(data) {
					console.log(data.value)
					if (data.value != 'nothing') {
						var info = data.value
						var ews = info.split("+-")
						//sleep(1000)
						document
								.getElementById("nopushdown").innerHTML = "<tr> <td><h4 style='color:green;display:inline'>Step2: </h4>"
								+ ews[0]
								+ "</td></tr><tr> <td><h4 style='color:green;display:inline'>Step1: </h4>"
								+ ews[1]
								+ "</td></tr><tr> <td><h4 style='color:green;display:inline'>Step0: </h4>"
								+ ews[2] + "</td></tr>"
					}
				}
			});
		}
		
		function push(){
			document.getElementById("pushdown").innerHTML += "<tr> <td> 物理计划生成中...</td></tr><tr> <td>"
			setTimeout(pushs, 1500);
		}
		
		function pushs(){
			$.ajax({
				url : '/rest/highEchart/getPushdown',
				cache : false,
				success : function(data) {
					console.log(data.value)
					if (data.value != 'nothing') {
						var info = data.value
						var ews = info.split("+-")
						
						document
								.getElementById("pushdown").innerHTML = "<tr> <td><h4 style='color:red;display:inline'>Step1: </h4>"
								+ ews[0]
								+ "</td></tr><tr> <td><h4 style='color:red;display:inline'>Step0: </h4>"
								+ ews[1]
								+ "</td></tr>"
								
					}
				}
			});
		}
		
		
		/**
		 * Ajax 请求数据接口，并通过 Highcharts 提供的函数进行动态更新
		 * 接口调用完毕后间隔 1 s 继续调用本函数，以达到实时请求数据，实时更新的效果
		 */
		 
		function requestData() {
			$
					.ajax({
						url : '/rest/highEchart/getNum',
						cache : false,
						success : function(point) {
							console.log(point.value)
							//  var points = JSON.parse(point.value)
							var x = (new Date()).getTime(), // 当前时间
							y = parseInt(point.value);
							var series = chart.series[0], shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点

							// 新增点操作
							//具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
							chart.series[0].addPoint([ x, y ], true, shift);
							document.getElementById("generateRates").innerHTML = point.value

							// 一秒后继续调用本函数
							setTimeout(requestData, 1000);
						},

					});

			$
					.ajax({
						url : '/rest/highEchart/getErrorWater',
						cache : false,
						success : function(data) {
							console.log(data.value)
							var points = JSON.parse(point.value)
							if (data.value != 'nothing') {
								var errorWater = data.value
								var ews = errorWater.split(",")
								document.getElementById("error-accounts").innerHTML += "<tr> <td>"
										+ ews[2]
										+ "</td> <td>"
										+ ews[9]
										+ "</td> <td>"
										+ ews[11]
										+ "</td> </tr>"
								document.getElementById("errorCounts").innerHTML = parseInt(document
										.getElementById("errorCounts").innerHTML) + 1
								if (parseInt(document
										.getElementById("errorCounts").innerHTML) != 0)
									document.getElementById("errorRate").innerHTML = parseInt(document
											.getElementById("error-accounts").innerHTML)
											/ parseInt(document
													.getElementById("errorCounts").innerHTML)

							}
						}
					});

		}
	</script>


</body>
</html>